{% extends "base.html" %}

{% block title %}Doctor's Lobby - Quick Care{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/doctor-queue.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/video-call.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
{% endblock %}

{% block content %}
<div class="doctor-queue-container">
    <!-- Professional Dashboard Card -->
    <div class="queue-card">
        <!-- Header -->
        <div class="queue-header">
            <div class="header-icon">
                <i class="fas fa-user-md"></i>
            </div>
            <h1 class="queue-title">Virtual Consultation Lobby</h1>
            <p class="queue-subtitle">Review patient information before starting the consultation</p>
        </div>

        <!-- Live Status Badge -->
        <div class="status-badge" id="status-badge">
            <div class="status-pulse"></div>
            <span id="status-text">Loading...</span>
        </div>

        <!-- Patient Info Section -->
        <div class="patient-info-section">
            <div class="patient-avatar">
                <i class="fas fa-user"></i>
            </div>
            <div class="patient-details">
                <h2 class="patient-name" id="patient-name">Loading...</h2>
                <p class="patient-email" id="patient-email"></p>
            </div>
        </div>

        <!-- Appointment Details -->
        <div class="appointment-grid">
            <div class="info-card">
                <i class="fas fa-calendar-alt icon"></i>
                <div>
                    <div class="info-label">Appointment Time</div>
                    <div class="info-value" id="appointment-time">--:-- --</div>
                </div>
            </div>
            <div class="info-card">
                <i class="fas fa-clock icon"></i>
                <div>
                    <div class="info-label">Time Until Start</div>
                    <div class="info-value" id="time-until">-- mins</div>
                </div>
            </div>
            <div class="info-card">
                <i class="fas fa-video icon"></i>
                <div>
                    <div class="info-label">Appointment Type</div>
                    <div class="info-value" id="appointment-type">Video</div>
                </div>
            </div>
        </div>

        <!-- Medical Notes Section -->
        <div class="notes-section">
            <h3 class="notes-title">
                <i class="fas fa-notes-medical"></i> Patient Information
            </h3>
            <div class="notes-grid">
                <div class="note-item">
                    <span class="note-label">Category:</span>
                    <span class="note-value" id="disease-category">--</span>
                </div>
                <div class="note-item full-width">
                    <span class="note-label">Symptoms:</span>
                    <span class="note-value" id="symptoms">--</span>
                </div>
                <div class="note-item full-width" id="notes-container" style="display: none;">
                    <span class="note-label">Additional Notes:</span>
                    <span class="note-value" id="notes">--</span>
                </div>
            </div>
        </div>

        <!-- Action Button -->
        <div class="action-section">
            <!-- Countdown Notice (shown when > 30 mins away) -->
            <div id="early-access-notice" style="display: none; margin-bottom: 1rem;">
                <div
                    style="background: rgba(251, 191, 36, 0.15); border: 1px solid rgba(251, 191, 36, 0.4); border-radius: 12px; padding: 1rem 1.5rem; color: #fbbf24; font-weight: 600; display: flex; align-items: center; gap: 0.75rem; justify-content: center;">
                    <i class="fas fa-clock" style="font-size: 1.25rem;"></i>
                    <span>Consultation opens in <strong id="countdown-display">--:--</strong> (30 min before scheduled
                        time)</span>
                </div>
            </div>
            <button class="start-consultation-btn" id="start-consultation-btn">
                <i class="fas fa-play-circle"></i>
                <span>Start Consultation</span>
            </button>
            <p class="action-hint" id="action-hint">Click when you're ready to begin the video call</p>

        </div>
    </div>

    <!-- Appointment ID & Datetime (Hidden) -->
    <input type="hidden" id="appointment-id" value="{{ appointment.id }}">
    <input type="hidden" id="appointment-datetime"
        value="{{ appointment.appointment_date.isoformat() }}T{{ appointment.appointment_time.strftime('%H:%M:%S') }}">

    <!-- Video Call Modal -->
    <div id="video-call-modal">
        <div class="video-grid">
            <!-- Connection Status -->
            <div id="connection-status" class="connection-status">Connecting...</div>

            <!-- Remote Video (Doctor/Patient) -->
            <div id="remote-player" class="remote-player"></div>

            <!-- Local Video (You) -->
            <div id="local-player" class="local-player"></div>

            <!-- Controls -->
            <div class="video-controls">
                <button id="toggle-mic" class="control-btn">
                    <i class="fas fa-microphone"></i>
                </button>
                <div class="video-remote-volume" title="How loudly you hear the other person">
                    <i class="fas fa-volume-up" aria-hidden="true"></i>
                    <input type="range" id="remote-voice-volume" min="0" max="100" value="100"
                        aria-label="Their voice volume" />
                </div>
                <button id="toggle-camera" class="control-btn">
                    <i class="fas fa-video"></i>
                </button>
                <button id="end-call-btn" class="control-btn end-call">
                    <i class="fas fa-phone-slash"></i>
                </button>
            </div>

            <!-- In-Call No Show Action -->
            <div id="in-call-no-show-container"
                style="display: none; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1000; background: rgba(0,0,0,0.6); padding: 10px 15px; border-radius: 12px; backdrop-filter: blur(5px);">
                <button class="btn btn-sm btn-outline-danger d-flex align-items-center gap-2" id="in-call-no-show-btn"
                    style="border-radius: 8px; font-weight: 600; white-space: nowrap;">
                    <i class="fas fa-user-times"></i>
                    <span>Mark No-Show</span>
                </button>
                <p class="text-center mt-1 mb-0" id="in-call-no-show-hint"
                    style="font-size: 0.75rem; color: #fbbf24; margin: 0;"></p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- Agora RTC SDK -->
<script src="https://download.agora.io/sdk/release/AgoraRTC_N-4.19.0.js"></script>

<!-- Socket.IO -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"></script>

<!-- Video Call Logic -->
<script src="{{ url_for('static', filename='js/video-call.js') }}"></script>

<!-- Doctor Queue Logic -->
<script src="{{ url_for('static', filename='js/doctor-queue.js') }}"></script>
{% endblock %}